<template>
  <el-col v-bind='colProps' :class='classNames'>
    <div v-if="schema.slotHtml" v-html="schema.slotHtml"></div>
    <div class='el-form-item co-form-item__view' v-if='formItemType === "view"'>
      <label class='el-form-item__label co-form-label' :style='{width: getLabelWidth}'>{{schema.label}}</label>
      <div class='el-form-item__content co-form-val'>
        <CoImageUpload v-if='schema.component === "co-image-upload"' :imageList="currentValue" v-bind="bindProps"></CoImageUpload>
        <CoPdfUpload v-else-if='schema.component === "co-pdf-upload"' v-model="currentValue" v-bind="bindProps"></CoPdfUpload>
        <template v-else-if='!schema.customRender'>
          {{showVal}}
        </template>
        <co-form-item-render v-else :customRender='schema.customRender' :scope='{currentValue, formModel, schema}'></co-form-item-render>
        <!-- <div v-else v-html="schema.customRender(currentValue, formModel, schema)"></div> -->
      </div>
    </div>
    <el-form-item v-else :label="schema.label" :prop="schema.field" :label-width='getLabelWidth' class="c-query-select" :rules="schema.dynamicRules">
      <component :is="schema.component" v-model="currentValue" v-bind="bindProps" v-on="schema.on" @change="setFormModel" clearable :size='size' class='w100'>
        <template v-if='schema.component === "el-select"'>
          <el-option
            v-for="item in schema.componentProps.options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </template>
        <template v-else-if='schema.component === "el-radio-group"'>
          <el-radio v-for="item in schema.componentProps.options"
            :key="item.value"
            :label="item.value"
            >{{item.label}}</el-radio>
        </template>
      </component>
    </el-form-item>
  </el-col>
</template>

<script>
import CoStaffQuery from '../../co-staff-query'
import CoAddress from '../../co-address'
import CoImageUpload from '../../co-image-upload'
import CoFormItemRender from './co-form-item-render'
import CoPdfUpload from '../../co-pdf-upload'
export default {
  props: {
    formModel: {
      type: Object,
      default: () => {}
    },
    // 类型
    formType: {
      type: String,
      default: 'edit' // 'view', 'edit'
    },
    schema: {
      type: Object,
      default: () => {}
    },
    baseColProps: {
      type: [Object, Number]
    },
    size: {
      type: String,
      default: 'medium'
    },
    bindValue: {
      value: null
    }
  },
  components: {
    CoStaffQuery,
    CoAddress,
    CoImageUpload,
    CoFormItemRender,
    CoPdfUpload
  },
  data () {
    return {
      currentValue: null
    }
  },
  watch: {
    'currentValue': {
      handler (val) {
        this.setFormModel()
      },
      deep: true,
      immediate: true
    },
    'bindValue': {
      handler (val) {
        this.currentValue = val
      },
      deep: true,
      immediate: true
    }
  },
  computed: {
    bindProps () {
      if (this.schema && this.schema.componentProps && this.schema.componentProps.options) {
        let obj = JSON.parse(JSON.stringify(this.schema.componentProps))
        delete obj.options
        return obj
      }
      return this.schema.componentProps
    },
    getLabelWidth () {
      if (this.schema.labelWidth && !isNaN(this.schema.labelWidth)) {
        return (this.schema.labelWidth + 'px')
      }
      return (this.schema.labelWidth ? this.schema.labelWidth : '')
    },
    // 列值
    colProps () {
      if (this.schema.componentProps && this.schema.componentProps.baseColProps) {
        return this.schema.componentProps.baseColProps
      }
      return this.baseColProps
    },
    // 表单项的模式
    formItemType () {
      if (this.schema.formItemType) {
        return this.schema.formItemType
      }
      return this.formType
    },
    // 展示值
    showVal () {
      if (this.formItemType === 'view' && this.schema.formatter && typeof this.schema.formatter === 'function') {
        return this.schema.formatter(this.formModel, this.schema, this.currentValue)
      } else {
        return this.currentValue
      }
    },
    classNames () {
      let className = 'co-form-col '
      if (this.formItemType === 'view') {
        className = className + 'co-form-col_view '
      }
      if (this.colProps.className) {
        className = className + this.colProps.className
      }

      return className
    }
  },
  created () {
  },
  mounted () {
    if (this.schema.defaultValue) {
      this.currentValue = this.schema.defaultValue
    }
  },
  methods: {
    setFormModel () {
      // console.log('setFormModel', this.schema.field, this.currentValue)
      this.$emit('setFormModel', this.schema.field, this.currentValue)
      if (this.schema.on && this.schema.on.onChange) {
        this.schema.on.onChange(this.currentValue)
      }
    }
  }
}
</script>

<style lang="scss">
.co-basic-form .el-row .el-col.co-form-col {
  margin-bottom: 12px;
}

.co-basic-form .c-query-select .el-date-editor--daterange.el-input,
.co-basic-form .c-query-select .el-date-editor--daterange.el-input__inner,
.co-basic-form .c-query-select .el-date-editor--timerange.el-input,
.co-basic-form .c-query-select .el-date-editor--timerange.el-input__inner {
  width: 100%;
}

.co-basic-form .el-row .el-form-item__content {
  line-height: 1;
}

.co-basic-form .el-row .el-col.co-form-col.co-form-col_view {
  margin-bottom: 0;
  .el-form-item__label {
    line-height: 30px;
  }
  .el-form-item__content {
    line-height: 30px;
  }
}

.co-basic-form.el-form--label-top .el-row .co-form-col .el-form-item__label, .co-basic-form.el-form--label-top .el-row .el-col.co-form-col.co-form-col_view .el-form-item__label{
  line-height: 1.6;
}
.co-basic-form {
  .el-form-item__error {
    padding-top: 0px;
  }
}

.co-form-item__view {
  .co-form-label {
    color: #83909d;
  }
}
</style>
